<template>
<div class="div4">
  <div><van-nav-bar
      title="搜索"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft()"
  /></div>
  <div class="div2" style="color: cyan;">
    <h1>探索</h1>
  </div>
  <div>
    <div>
      <div class="div1">
        <van-cell-group inset>
          <div class="div6">
            <van-field
                v-model="attractions.city"
                label="目的地"
                placeholder="请输入你想要去的城市名字"
            />
            <van-field type="text" v-model="datestart"/>
            <van-field type="text" v-model="dateend" />
          </div>
        </van-cell-group>
      </div>
      <div class="div5">
        <van-cell title="点击选择日期区间"  @click="show = true" />
        <van-calendar v-model:show="show" color="red" type="range" @confirm="onConfirm" />
      </div>
      <div class="div">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1"/>
        </van-dropdown-menu>
      </div>
      <div class="div">
        <van-checkbox-group v-model="checked" direction="horizontal">
          <van-checkbox name="a" icon-size="30px">可预订</van-checkbox>
          <van-checkbox name="b" icon-size="30px">可自驾前往</van-checkbox>
          <van-checkbox name="c" icon-size="30px">有吸烟区</van-checkbox>
        </van-checkbox-group>
      </div>
      <div class="div3">
        <van-button round block type="primary" @click="searchBycity()">
          搜索
        </van-button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    const date = ref('');
    const show = ref(false);
    const value1 = ref(0);
    const value2 = ref('a');
    const checked = ref([]);
    const datestart = ref('');
    const dateend = ref('');

    const option1 = [
      { text: '成年人及小孩', value: 0 },
      { text: '仅成年人', value: 1 },
      { text: '中国台湾', value: 2 },
    ];
    const formatDate = (date) => `2022/${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (values) => {
      const [start, end] = values;
      show.value = false;
      datestart.value=formatDate(start);
      dateend.value=formatDate(end);
    };

    return {
      checked,
      value1,
      value2,
      option1,
      datestart,
      dateend,
      date,
      show,
      onConfirm,
      attractions:{
        city:"",
        id:null,
        needday:2,
        name:"云台山",
        price:null,
        imgurl:null,
        label:null,
        flag:null,
        lng:null,
        lat:null
      }
    };
  },methods:{
    searchBycity(){
      let dateSpan,iDays,datestart,dateend
      datestart = Date.parse(this.datestart)
      dateend = Date.parse(this.dateend)
      dateSpan = dateend - datestart
      dateSpan = Math.abs(dateSpan)
      iDays = Math.floor(dateSpan / (24 * 3600 * 1000))
      this.attractions.needday=iDays
      console.log(this.attractions.needday)
      this.axios.post("api/attractions/selectbycity.do",this.attractions).then((r)=>{
        if(r.data.code==200){
          this.$store.commit("setattractions",r.data.data)
          this.$router.push("/test");
        }else {
          this.$toast("查询失败");
        }
      })
    },onClickLeft(){
      history.back();
    },datedifference() {    //sDate1和sDate2是2006-12-18格式

    }

  },
};

</script>

<style scoped>
.div2{
  text-align: left;
  margin-left: 20px;
}
.div1{
  text-align: left;
  margin-left: 20px;
  width: 90%;
  opacity: 0.8;
}
.div{
  width: 80%;
  margin-left: 35px;
  padding-top: 10px;
  margin-top: 30px;
}
.div4{
  height:600px;
  background: url(https://sjbz-fd.zol-img.com.cn/t_s208x312c5/g6/M00/0F/0C/ChMkKV_lViKIVnceACkftr-aRegAAHRcAHFaHsAKR_O682.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.div3{
  width: 100%;
  margin-top: 60px;
}
.div5{
  border-radius: 8px;
  border-style: outset;
  border-color: antiquewhite;

  text-align: left;
  margin-left: 35px;
  width: 82%;
}
</style>